<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Boxue</title>
  <!-- <link rel="stylesheet" type="text/css" href="./css/proup.css" /> -->
  <link rel="stylesheet" href="./css/elementPlus.css">
  <script src="./js/vue.global.js"></script>
  <script src="./js/elementPlus.js"></script>

  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.8/index.min.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.2/vue.global.prod.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.8/index.full.min.js"></script> -->
</head>

<body>
  <!-- <div class="box">
    <div class="siginin">better to better</div>
  </div> -->

  <label for="username">用户名：</label>
  <input type="text" id="username" />

  <label for="theme">主题：</label>
  <select id="theme">
    <option value="light">亮色</option>
    <option value="dark">暗色</option>
  </select>

  <button id="saveBtn">保存</button>


  <div id="app">

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" minWidth="180">
        <template #default="{ row }">{{row.date}}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" minWidth="180">
        <template #default="{ row }">{{row.name}}</template>
      </el-table-column>
      <el-table-column prop="address" label="地址" minWidth="200">
        <template #default="scope">
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

  <script setup>
    const { createApp, ref, reactive } = Vue;
    const app = createApp({
      data: () => {
        return {

        }
      },
      setup(props, { emit }) {
        let tableData = reactive([
          {
            date: '2016-05-03',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-02',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          }
        ]);

        const handleDelete = (index, row) => {
          console.log(index, row)
        }

        return {
          tableData,
          handleDelete
        }
      }

    }).use(ElementPlus).mount("#app");
  </script>

  <!-- <script>
    const { createApp, ref, reactive } = Vue;
    const app = createApp({
      setup() {
        const message = ref('boxue is 666!');
        let tableData = reactive([
          {
            date: '2016-05-03',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-02',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          }]);
        return {
          message,
          tableData
        }
      }
    });
    app.use(ElementPlus);
    app.mount("#app");
  </script> -->

  <!-- <script>
    const { createApp, ref, reactive } = Vue;
    const app = createApp({
      setup() {
        const message = ref('boxue is 666!');
        let tableData = reactive([
          {
            date: '2016-05-03',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-02',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-04',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-01',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-08',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-06',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          },
          {
            date: '2016-05-07',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          }]);
        setTimeout(() => {
          console.log(`popup.html 54 ['123']`, '123');
          tableData.push({
            date: '2016-05-07',
            name: 'Tom',
            state: 'California',
            city: 'Los Angeles',
            address: 'No. 189, Grove St, Los Angeles',
            zip: 'CA 90036',
          });

          console.log(`popup.html 54 ['123']`, '123');
        }, 3000)
        return {
          message,
          tableData
        }
      }
    });
    app.use(ElementPlus);
    app.mount("#app");
  </script> -->
  <!-- <script src="./js/jquery.min.js"></script> -->
  <!-- <script src="./js/popup.js"></script> -->
</body>

</html>